import React, { useRef, useEffect } from "react";
import { Form } from "antd";
import ModalDialog from "@/components/modalDialog";
import FormWarpper from "@/components/FormWarpper";
export const AddUser = (props) => {
  const { isModal, userInfo = {}, onModalCancel, onModalFinish } = props;
  const formRef = useRef(null);
  const [form] = Form.useForm();

  useEffect(() => {
    if (Object.keys(userInfo).length > 0) {
      console.log("form", form, userInfo);
      form.setFieldsValue({
        username: userInfo.name,
        address: userInfo.address,
        status: userInfo.status
      });
    }
  }, []);

  const handleModalCancel = (data) => {
    onModalCancel(data);
  };

  const handleFinish = (values) => {
    onModalFinish(values);
  };

  const formSetting = {
    span: 24,
    columns: [
      {
        name: "username",
        label: "用户名",
        placeholder: "请输入用户名",
        allowClear: true,
        rules: [{ required: true, message: "请输入用户名!" }],
      },
      {
        name: "address",
        label: "地址",
        placeholder: "请输入地址",
        allowClear: true,
        // rules: [{ required: true, message: "请输入用户名!" }],
      },
      {
        name: "status",
        label: "开关",
        formType: "switch",
        defaultChecked: false,
        valuePropName: "checked", // 需要指定checked
      },
    ],
  };

  const contentSlot = (
    <FormWarpper
      form={form}
      formRef={formRef}
      formSetting={formSetting}
      handleFinish={handleFinish}
    />
  );

  return (
    <ModalDialog
      formRef={formRef}
      isModal={isModal}
      contentSlot={contentSlot}
      handleModalCancel={handleModalCancel}
    />
  );
};
export default AddUser;
